<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h1>修改员工</h1>
  <form action="">
      <input type="text" name="id"   v-model="emp.id" readonly placeholder="id">
      <input type="text" name="name" v-model="emp.name" placeholder="名字">
      <input type="text" name="job"  v-model="emp.job" placeholder="工作">
      <input type="text" name="sal"  v-model="emp.sal" placeholder="工资">
      <input type="button" value="修改" @click="update()">
  </form>
<!--引入axios和vue-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
      let v = new Vue({
          el:"form",
          data:{
              emp:{id:"",name:"",job:"",sal:""}
          },
          methods:{
              update:function () {
                  //获取form表单的数据
                  let data = new FormData();
                  data.append("name",v.emp.name)
                  data.append("job",v.emp.job)
                  data.append("sal",v.emp.sal)
                  axios.post("/update",data).then(function (res) {
                      if(res.data==1){
                          alert("修改成功");
                          //修改成功后跳转到页面页面
                          location.href="/select.html";
                      }else{
                          alert("修改失败!");
                          location.reload();
                      }
                  })
              }
          },
          created:function () {
              //获取地址栏上的id
              let id = location.search.split("=")[1];
              console.log(id);
              //发出异步请求
              axios.get("/selectById?id="+id).then(function (res) {
                  v.emp = res.data;
              })
          }
      });

  </script>
</body>
</html>